/*
 * @Description: 
 * @Author: ldx
 * @Date: 2022-05-31 23:39:45
 * @LastEditors: ldx
 * @LastEditTime: 2022-07-17 23:52:42
 */
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
/** 创建场景 */
const scene = new THREE.Scene();

// 创建光源
// 环境光，没有特定的方向
const ambientLight = new THREE.AmbientLight(0xff0000)
scene.add(ambientLight)
// 平行光，类似于生活中的太阳光
const directionalLight = new THREE.DirectionalLight(0xff0000, 1)
directionalLight.position.set(400, 200, 300)
scene.add(directionalLight)
/** 相机设置 */
const width = window.innerWidth; //窗口宽度
const height = window.innerHeight; //窗口高度
const k = width / height; //窗口宽高比
//创建相机对象
const camera = new THREE.PerspectiveCamera(45, k, 1, 1000);
camera.position.set(0, 0, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/** 创建渲染器对象 */
const renderer = new THREE.WebGLRenderer({
  animate:true
});
renderer.setPixelRatio(window.devicePixelRat)
renderer.setSize(width, height); //设置渲染区域尺寸
// renderer.setClearColor(0x888888, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
// 创建一个立方缓冲几何体
const geometry = new THREE.PlaneBufferGeometry( 100, 100, 56, 56 )
// 创建材质
const material = new THREE.ShaderMaterial({
  vertexShader:`
    varying vec2 aUv;
    void main(){
      aUv = uv;
      vec4 modelPosition = modelMatrix * vec4(position,1.0);
     
      gl_Position = projectionMatrix * viewMatrix * modelPosition;
    }
  `,
  fragmentShader:`
    varying vec2 aUv;
    uniform float uTime;
    void main(){
      /** 1.渐变 */
      // gl_FragColor = vec4(aUv,1,1);
      /** 2.反向渐变 */
      // gl_FragColor = vec4(1.0-aUv,1,1);
      /** 3.x轴渐变 */
      // float x = 1.0-aUv.x;
      // gl_FragColor = vec4(x,x,1,1);
      /** 4.x轴多重渐变 */
      // float x = mod(aUv.x * 10.0,1.0);
      // gl_FragColor = vec4(x,x,x,1);
      /** 6.重复渐变 */
      // float x = mod(aUv.x * 10.0,1.0);
      // x+= mod(aUv.y * 10.0,1.0);
      // gl_FragColor = vec4(x,x,x,1);
      /** 7.重复渐变-多色 */
      // float x = mod(aUv.x * 10.0,1.0);
      // float y = mod(aUv.y * 10.0,1.0);
      // gl_FragColor = vec4(x,y,1,1);
      /** 8.重复渐变-2 */
      // float x = mod(aUv.x * 10.0,1.0);
      // x*= mod(aUv.y * 10.0,1.0);
      // gl_FragColor = vec4(x,x,x,1);
      /** 9.渐变-斑马 */
      // float x = step(mod(aUv.x * 10.0,1.0),0.4);
      // gl_FragColor = vec4(x,x,x,1);
      /** 10.重复方块-相减 */
      // float x = step(mod(aUv.x * 10.0,1.0),0.4);
      // x -= step(mod(aUv.y * 10.0,1.0),0.4);
      // gl_FragColor = vec4(x,x,x,1);
      /** 11.类门窗-同时存在 */
      // float x = step(mod(aUv.x * 10.0,1.0),0.4);
      // x += step(mod(aUv.y * 10.0,1.0),0.4);
      // gl_FragColor = vec4(x,x,x,1);
      /** 12.重复方块-求差 */
      // float x = step(mod(aUv.x * 10.0,1.0),0.4);
      // x *= step(mod(aUv.y * 10.0,1.0),0.4);
      // gl_FragColor = vec4(x,x,x,1);
      /** 12.重复方块-动画 */
      // float x = step(mod((aUv.x-uTime*0.2) * 10.0,1.0),0.4);
      // x += step(mod((aUv.y-uTime*0.2) * 10.0,1.0),0.4);
      // gl_FragColor = vec4(x,x,x,1);
      /** 13.绝对值 */
      // float x = abs(aUv.x - 0.5);
      // x += step(mod((aUv.y-uTime*0.2) * 10.0,1.0),0.4);
      // x += abs(aUv.y - 0.5);
      // gl_FragColor = vec4(x,x,x,1);
      /** 14.最小值 */
      // float strength = min(abs(aUv.x - 0.5),abs(aUv.y - 0.5));
      // gl_FragColor = vec4(strength,strength,strength,1);
      /** 14.最大值 */
      // float strength = max(abs(aUv.x - 0.5), abs(aUv.y - 0.5));
      // gl_FragColor = vec4(strength,strength,strength,1);
      /** 15.距离 */
      // float strength = 0.15 / distance(aUv , vec2(0.75,0.75)) ;
      // gl_FragColor = vec4(strength,0,0,1);
      /** 16.方块分割 */
      // for(float i=0.0;i<5.;i++){
      //   for(float j=0.0;j<5.;j++){
      //     if(aUv.x <= i && aUv.x >= (i*0.2) && aUv.y <= j && aUv.y >= (j*0.2)){
      //         gl_FragColor = vec4(i*0.2,j*0.2,j*0.2,1);  
      //     }
      //   }
      // }
      /** 17.扫描 */
      // float angle = atan(aUv.y-0.5,aUv.x-0.5) + 3.14;
      // float strength = (mod((angle+uTime),6.28)) / 6.28;
      // strength -= step(0.5,distance(aUv,vec2(0.5,0.5)));
      // gl_FragColor = vec4(strength,strength,strength,1);
      
      /** 18.旋转-风扇 */
      float angle = atan(aUv.y-0.5,aUv.x-0.5) + 3.14;
      float strength = angle / 6.28;
      strength = mod((strength+uTime*0.12) * 20.0, 1.);
      float alpha = step(distance(aUv,vec2(0.5,0.5)),0.5);
      gl_FragColor = vec4(1,strength,strength,alpha);

    }
  `,
  uniforms:{
    uTime:{
      value:0
    },
    
  },
  side:THREE.DoubleSide,
  transparent:true,
  opacity:1
});
// 生成带有材质的物体
const cube = new THREE.Mesh( geometry, material );
// 把物体添加进场景中
scene.add( cube );

const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener("change", () => {
  render()
}); //监听鼠标、键盘事件
// 渲染
function render(){
  renderer.render(scene, camera); //执行渲染操作
}
const clock = new THREE.Clock();
function animate(){
  const time = clock.getElapsedTime();
  material.uniforms.uTime.value = time
  render()
  requestAnimationFrame(animate)
}
animate()